import React, { useEffect, useState } from "react";
import axios from "axios";
import {
  Space,
  Table,
  Button,
  message as antdMessage,
  Modal,
  Form,
  Input,
} from "antd";
const App = () => {
  // 0. ref
  const [form] = Form.useForm();

  // 1. 数据容器
  const [list, setList] = useState();
  const [ids, setIds] = useState([]);
  const columns = [
    {
      dataIndex: "id",
      title: (
        <div>
          {ids.length > 0 ? (
            <Button
              type="primary"
              danger
              onClick={() => handleDelete(ids.join(","))}
            >
              删除所选
            </Button>
          ) : (
            "id"
          )}
        </div>
      ),
      key: "id",
    },
    {
      dataIndex: "nickname",
      title: "nickname",
      key: "nickname",
    },
    {
      dataIndex: "tel",
      title: "tel",
      key: "tel",
    },
    {
      dataIndex: "address",
      title: "address",
      key: "address",
    },
    {
      title: "操作",
      key: "opration",
      render(row) {
        return (
          <Space>
            <Button onClick={() => handleDelete(row.id)} type="primary" danger>
              删除
            </Button>
            <Button type="primary" onClick={() => openDialogByEdit(row)}>
              编辑
            </Button>
          </Space>
        );
      },
    },
  ];
  const [isAdd, setIsAdd] = useState(false);
  const [open, setOpen] = useState(false);
  // 2. 查询
  const getList = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };
  // 3. 删除
  const handleDelete = (id) => {
    Modal.confirm({
      title: "提示",
      content: "确认要删除吗？",
      okText: "确定",
      cancelText: "取消",
      async onOk() {
        await axios.delete("/api/list", { params: { id } });
        await getList();
        antdMessage.success("删除成功");
      },
    });
  };
  // 4. 修改
  const openDialogByEdit = (row) => {
    setOpen(true);
    setIsAdd(false);
    form.setFieldsValue(row)
  };
  // 5. 添加
  const openDialogByAdd = () => {
    setOpen(true);
    setIsAdd(true);
    form.resetFields()
  };
  // 6. 副作用
  useEffect(() => {
    getList();
  }, []);
  // 7. 弹框确定
  const handleOK = async () => {
    const data = form.getFieldsValue()
    if(isAdd) {
      // 添加
      await axios.post('/api/list', data)
    } else {
      //修改
      await axios.post('/api/list/edit', { id: data.id, editData: data })
    }
    await getList();
    setOpen(false);
    antdMessage.success(isAdd ? '添加成功': '编辑成功')
  }
  return (
    <div>
      <Button type="primary" onClick={() => openDialogByAdd()}>
        新增
      </Button>
      <Table
        dataSource={list}
        rowKey={"id"}
        columns={columns}
        rowSelection={{
          onChange(selectedRowKeys) {
            setIds(selectedRowKeys);
          },
        }}
      ></Table>

      <Modal
        open={open}
        okText="确定"
        cancelText="取消"
        title={isAdd ? "添加" : "编辑"}
        onCancel={() => setOpen(false)}
        onOk={() => handleOK()}
      >
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          <Form.Item label="id" name="id">
            <Input placeholder="请输入id" disabled></Input>
          </Form.Item>
          <Form.Item label="nickname" name="nickname">
            <Input placeholder="请输入nickname"></Input>
          </Form.Item>
          <Form.Item label="tel" name="tel">
            <Input placeholder="请输入tel"></Input>
          </Form.Item>
          <Form.Item label="address" name="address">
            <Input placeholder="请输入address"></Input>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default App;
